<template>
  <div>
    <el-row type="flex" justify="end">
      <el-select v-model="currentYear" size="mini" style="width:90px" @change="dataChange">
        <el-option v-for="year in yearList" :key="year" :label="year+'年'" :value="year" />
      </el-select>
      <el-select v-model="currentMonth" size="mini" style="width:90px" @change="dataChange">
        <el-option v-for="month in 12" :key="month" :label="month+'月'" :value="month" />
      </el-select>
    </el-row>
    <!-- 日历组件 -->
    <el-calendar v-model="currentDate">
      <template #dateCell="{data, date}">
        <div class="date-content">
          <span class="text"> {{ data.day | getDay }}</span>
          <span v-if="isWeekend(date)" class="rest">休</span>
        </div>
      </template>
    </el-calendar>
  </div>
</template>

<script>
export default {
  filters: {
    getDay(oldData) {
      const data = oldData.split('-')[2]
      return data.startsWith('0') ? data.substring(1) : data
    }
  },
  data() {
    const currentDate = new Date()
    const currentYear = currentDate.getFullYear()
    const currentMonth = currentDate.getMonth() + 1
    const yearList = []
    for (let i = 0; i < 11; i++) {
      yearList.push(currentYear - 5 + i)
    }
    return {
      currentDate,
      currentMonth,
      currentYear,
      yearList
    }
  },
  watch: {
    currentDate() {
      this.currentYear = this.currentDate.getFullYear()
      this.currentMonth = this.currentDate.getMonth() + 1
    }
  },
  methods: {
    dataChange() {
      this.currentDate = new Date(`${this.currentYear}-${this.currentMonth}`)
    },
    isWeekend(date) {
      // getDay()是获取星期的函数
      return date.getDay() === 6 || date.getDay() === 0
    }
  }
}
</script>

<style>

</style>
